<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人信息展示页面</title>
    <script src="../../static/js/jquery-1.11.0.js"></script>
    <style>

        #d1 {
            width: 480px;
            height: 86vh;
            position: absolute;
            margin-top: 2vh;
            /*margin-left: 400px;*/
            right: 500px;
            background: rgba(255, 255, 255, 0.7);
            border-radius: 16px;
            text-align: center;
            /**/
            /*    内容超出时，打开滚动条*/
            overflow: auto;
        }

        .h1 {
            margin-top: 10px;
        }

        .d1 {
            /*border: 1px solid red;*/
            width: 100%;
            /*!*    内容超出时，打开滚动条*!*/
            /*    overflow: auto;*/
            padding-top: 20px;

        }

        .d1 > span {
            margin-left: -330px;
            font-size: 20px;
        }
        .d1>input[type=text]{
            width: 200px;
            height: 30px;
            margin-top: 20px;
            border-radius: 5px;
            padding-left: 10px;
        }
        .d1>input[type=password]{
            width: 200px;
            height: 30px;
            margin-top: 20px;
            border-radius: 5px;
            padding-left: 10px;
        }
        .d1>input[type=button]{
            width: 300px;
            height: 40px;
            margin-top: 20px;
            border-radius: 5px;
            background-color: mediumseagreen;
        }

        .prod {
            margin-top: 10px;
            width: 94%;
            margin-left: 3%;
            height: 100px;
            border: 1px solid gray;
            border-radius: 5px;
        }

        .prod > h2 {
            margin-top: 20px;
        }


    </style>
    <script>
        $(function (){
            //查询个人信息展示到列表中
            var uid=$("#userid").text();
            showuser();

            //确定修改
            $(".btn1").click(function (){
                //获取文本框数据
                var u_sex=$(".u_sex").val();
                var u_email=$(".u_email").val();
                var u_address=$(".u_address").val();
                var pwd1=$(".pwd1").val();
                var pwd2=$(".pwd2").val();
                var reg=/^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?![?~!,\.#&@$%()|{}"<>'\+\*\-:;^_`]+$)[?~!,\.#&@$%()|{}"<>'\+\*\-:;^_`0-9A-Za-z]{8,16}$/;
                if(pwd1!=""){
                    if(!reg.test(pwd1)){
                        alert("密码格式不正确");
                        return;
                    }
                    if(pwd1!=pwd2){
                        alert("两次密码不一致");
                        return;
                    }
                }
                $.ajax({
                    url:"/userServlet",
                    type:"post",
                    data:{action:"updateUserByUid",
                        uid:uid,
                        u_sex:u_sex,
                        u_email:u_email,
                        u_address:u_address,
                        pwd:pwd1
                    },
                    dataType:"json",
                    success:function (d){
                        if(d.code==1){
                            alert(d.msg);
                            showuser();
                        }else {
                            alert(d.msg);
                        }
                    },
                    error:function (){
                        alert("服务器正在维护，请稍后重试")
                    }
                })
            })
        })
        //根据用户编号查询用户信息
        function showuser(){
            //清空密码框
            $(".pwd1").val("");
            $(".pwd2").val("");

            //获取用户编号
            var uid=$("#userid").text();
            $.ajax({
                url:"/userServlet",
                type:"post",
                data:{action:"findUserByU_id",userid:uid},
                dataType:"json",
                success:function (d){
                    console.log(d)
                    if(d.code==1){
                        //渲染数据
                        $(".u_name").val(d.data.u_name);
                        $(".u_idcard").val(d.data.u_idcard);
                        $(".u_phone").val(d.data.u_phone);
                        $(".u_credit").val(d.data.u_credit);
                        $(".u_sex").val(d.data.u_sex);
                        $(".u_email").val(d.data.u_email);
                        $(".u_address").val(d.data.u_address);
                    }else {
                        alert(d.msg);
                    }
                },
                error:function (){
                    alert("服务器正在维护，请稍后重试")
                }
            })
        }
    </script>
</head>
<body>

<!--主体部分-->
<div id="d1">
    <h1 class="h1">个人信息</h1>
    <div class="d1">
        姓&emsp;&emsp;名：<input type="text" class="u_name" disabled><br>
        身份证号：<input type="text" class="u_idcard" disabled><br>
        手机&emsp;号：<input type="text" class="u_phone" disabled><br>
        信用积分：<input type="text" class="u_credit" disabled><br>
        性&emsp;&emsp;别：<input type="text" class="u_sex"><br>
        邮&emsp;&emsp;箱：<input type="text" class="u_email"><br>
        地&emsp;&emsp;址：<input type="text" class="u_address"><br>
        登录密码：<input type="password" class="pwd1" placeholder="不更改时无需填写"><br>
        确认密码：<input type="password" class="pwd2" placeholder="不更改时无需填写"><br>
        <input type="button" value="确认修改" class="btn1">
    </div>
</div>
</body>
</html>